<template>
  <div class="box">
    <div class="left">
      <div class="left_groid">
        <div class="left_groid_top" style="color: aliceblue; line-height: 25px">
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <div class="groid">
          <!-- 左上 -->
            <Lefttop></Lefttop>
        </div>
      </div>
      <div class="left_groid1">
        <div class="left_groid_top" style="color: aliceblue; line-height: 25px">
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <div class="groid1">
           <span style="display: inline-block; width: 50%; height: 20%; border: solid 1px #ccc; line-height: 20px;"> 
                    <img src="../../../public/images/用电量 2.png" alt="" style="width: 20px;height: 20px; margin-top: 5%; margin-right: 15%;margin-left: 10%; "><span style="color: aliceblue; font-size: 13px; margin-top: 5%;">咋日外来访客</span>
            </span>
            <span style="display: inline-block; width: 50%; height: 20%; border: solid 1px #ccc;">
                    <img src="../../../public/images/用电量 2.png" alt="" style="width: 20px;height: 20px; margin-top: 5%; margin-right: 15%; margin-left: 10%;"><span style="color: aliceblue; font-size: 13px; margin-top: 5%;">今日外来访客</span>
            </span>
            <ECharts7></ECharts7>
        </div>
      </div>
      <div class="left_groid2">
        <div class="left_groid_top" style="color: aliceblue; line-height: 25px">
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <div class="groid2">
              <ECharts8></ECharts8>
        </div>
      </div>
    </div>
    <div class="context">
         <Dt></Dt>
    </div>

    <div class="right">
      <div class="right_proid">
        <div class="right_proid_top" style="color: aliceblue; line-height: 33px;"><span style="margin-left: 10%;">水电用量</span></div>
        <div class="proid"></div>
      </div>
      <div class="right_proid1">
        <div class="right_proid_top" style="color: aliceblue; line-height: 33px;"><span style="margin-left: 10%;">水电用量</span></div>
        <div class="proid1">
           <!-- 列表 -->
           <Lb></Lb>
        </div>
      </div>
       <div class="right_proid1">
        <div class="right_proid_top" style="color: aliceblue; line-height: 33px;"><span style="margin-left: 10%;">水电用量</span></div>
        <div class="proid1">
            <!--列表 -->
            <Lb></Lb>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ECharts7 from '@/components/ECharts7.vue';
import ECharts8 from '@/components/ECharts8.vue';
import Lefttop from '@/components/Sb/Lefttop.vue';
import Lb from '@/components/Sb/Lb.vue';
import Dt from '@/components/Sb/Dt.vue';




</script>

<style scoped lang="scss">

.box {
  width: 100%;
  height: 100%;
  //   background: blue;
  display: flex;
  .left {
    width: 30%;
    height: 100%;
    background: url("../../public/image/Photo／背景／Left.png") no-repeat;
    background-size: 100% 100%;
    .left_groid {
      width: 75%;
      height: 23%;
      margin-left: 40px;
      margin-top: 60px;
      // background: rgba(250, 247, 247, 0.2);
      .groid {
        width: 100%;
        height: 80%;
        margin-top: 10px;
        background: rgba(250, 247, 247, 0.2);
      }
    }
    .left_groid1 {
      width: 75%;
      height: 35%;
      margin-left: 40px;
      margin-top: 20px;
      // background: rgba(250, 247, 247, 0.2);
      .groid1 {
        width: 100%;
        height: 80%;
        margin-top: 10px;
        background: rgba(250, 247, 247, 0.2);
      }
    }
     .left_groid2 {
      width: 75%;
      height: 25%;
      margin-left: 40px;
      margin-top: 20px;
      // background: rgba(250, 247, 247, 0.2);
      .groid2 {
        width: 100%;
        height: 80%;
        margin-top: 10px;
        background: rgba(250, 247, 247, 0.2);
      }
    }
  }
  .left_groid_top {
    background: url("../../public/images/左.png") no-repeat;
    width: 100%;
    height: 10%;
    // background: red;
    background-size: 100% 100%;
  }
  .right_proid_top{
    background: url("../../public/images/右.png") no-repeat;
    width: 100%;
    height: 10%;
    // background: red;
    background-size: 100% 100%;
  }
  .context {
    flex: 1;
    height: 70%;
    margin-top: 6%;
    // border: solid 1px #ccc;
  }

  .right {
    width: 30%;
    height: 100%;
    background: url("../../public/image/Photo／背景／Right.png") no-repeat;
    background-size: 100% 100%;
    .right_proid {
       width: 75%;
      height: 25%;
      margin-left: 70px;
      margin-top: 60px;
        // background: rgba(250, 247, 247, 0.2);
      .proid {
         width: 100%;
        height: 80%;
        margin-top: 10px;
        background: rgba(250, 247, 247, 0.2);
      }
    }
      .right_proid1 {
      width: 75%;
      height: 30%;
      margin-left: 70px;
      margin-top: 20px;
      // background: rgba(250, 247, 247, 0.2);
      .proid1 {
        width: 100%;
        height: 80%;
        margin-top: 10px;
        background: rgba(250, 247, 247, 0.2);
      }
    }
  }
}
</style>